<script>
export default { name: 'Document' };
</script>

<script setup>
import { ref } from 'vue'
import Banner from '@/components/Banner.vue'

const documentList = ref([
  { title: 'SysOM 容器化利器！', time: '2021-12-17', url: 'https://mp.weixin.qq.com/s/b5QNHmD_U0DcmUGwVm8Apw' },
  { title: '《可观测性成熟度模型白皮书》正式发布', time: '2023-09-15', url: 'https://mp.weixin.qq.com/s/ajDv8RWZsvh_VTh1tkFCHQ' },
  { title: 'SysOM 3.0 重磅发布', time: '2023-02-07', url: 'https://mp.weixin.qq.com/s/9CXxLxuumWA2CvcNKz-mxA' },
  { title: 'SysOM 2.0 存储诊断功能介绍', time: '2023-03-24', url: 'https://openanolis.cn/video/792425860258332673' },
  { title: 'SysOM 2.0 网络诊断功能介绍', time: '2023-03-23', url: 'https://openanolis.cn/video/791677879029285293' },
  { title: 'SysOM 2.0 内存诊断功能介绍', time: '2023-03-10', url: 'https://openanolis.cn/video/782175010752543033' },
  { title: 'SysOM 2.0 调度诊断功能介绍', time: '2023-03-09', url: 'https://openanolis.cn/video/782175010752543033' },
  { title: 'SysOM 2.0 重磅发布', time: '2023-02-07', url: 'https://mp.weixin.qq.com/s/99RDglcsUcVZhbs3Gszh0g' },
  { title: 'SysOM profiling 在云上环境的应用观测实践', time: '2023-02-01 20:00', url: 'https://mp.weixin.qq.com/s/2pHaVzoULLln10A12VCiXw' },
])
</script>

<template>
  <div class="document-wrap">
    <div class="container">
      <Banner>
        <template v-slot:bg>
          <img class="banner-bg" src="@/assets/img/document/banner_bg.png" />
        </template>
      </Banner>

      <div class="document-list">
        <div v-for="(item, index) in documentList" :key="index" class="document-item">
          <div class="document-item-img">运维文档</div>
          <div class="document-item-cont">
            <div class="document-title">{{ item.title }}</div>
            <div class="document-time">{{ item.time }}</div>
            <a class="view-more" :href="item.url" target="_blank" >查看更多</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.document-wrap {
  background: #F9F9F9;

  .container {
    margin: 0 auto;
    padding: 20px 0;
    width: 1180px;
  }

  .document-list {
    padding: 40px 0 26px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .document-item {
    margin-bottom: 20px;
    width: calc(50% - 14px);
    display: flex;
    align-items: center;

    .document-item-img {
      width: 150px;
      height: 150px;
      padding: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: url('@/assets/img/document/doc.png') center center no-repeat;
      background-size: cover;
      border-radius: 4px;
      font-family: PingFangSC-Medium;
      font-size: 14px;
      color: #FFFFFF;
      line-height: 16px;
      font-weight: 500;
    }

    .document-item-cont {
      flex: 1;
      padding: 27px 20px 0;
      height: 136px;
      background: #FFFFFF;
      border-radius: 4px;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #757575;
      line-height: 24px;
      font-weight: 400;
    }

    .document-title {
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: #262626;
      line-height: 20px;
      font-weight: 500;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    .document-time {
      margin-top: 10px;
      line-height: 16px;
    }

    .view-more {
      display: inline-block;
      margin-top: 20px;
      padding: 2px 11px;
      border: 1px solid #dbdbdb;
      border-radius: 4px;
      color: #757575;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        color: #0F75E8;
        border-color: #0F75E8;
      }
    }
  }
}
</style>
